<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:58
-->
<template>
  <div>
    <!-- 2.创建一个图表容器 -->
    <!-- vue框架 减少dom操作 虚拟dom -->
    <div ref="box" style="height: 150px"></div>
  </div>
</template>
<script>
// 1.引入g2plot
// 3.创建图表
// 3.1创建图表构造函数
import { Line } from "@antv/g2plot";
// 3.2创建图表实例对象
export default {
  data() {},
  methods: {
    // 加载折线图
    loadLine() {
      let line = new Line(this.$refs["box"], {
        data: [
          { year: "1991", value: 3 },
          { year: "1992", value: 4 },
          { year: "1993", value: 3.5 },
          { year: "1994", value: 5 },
          { year: "1995", value: 4.9 },
          { year: "1996", value: 6 },
          { year: "1997", value: 7 },
          { year: "1998", value: 9 },
          { year: "1999", value: 13 },
        ],
        xField: "year",
        yField: "value",
        color: "cyan",
        xAxis: {
          label: {
            rotate: -45,
            offset: 25,
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },
        yAxis: {
          grid: {
            line: {
              style: {
                lineDash: [2, 3],
                strokeOpacity: 0.2,
              },
            },
          },
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },
        tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        animation: {
          appear: {
            animation: "wave-in",
            duration: 3000,
          },
        },
      });
      // 4.渲染图表
      line.render();
    },
  },
  // 生命周期 页面实例加载完毕 图表一般在monted阶段调用
  mounted() {
    this.loadLine();
  },
};
</script>
<style lang="scss">
</style>